<script setup lang="ts">
import { ElMessage, type FormInstance } from 'element-plus'
import { ref } from 'vue'
import type { MenuTable } from '@/types/menu'
import { addSysMenu } from '@/api/menu'
import IconSelecter from '@/components/IconSelecter.vue'
import { icon } from '@/util/icons'
import { componentSelect, formRules } from './comList'
import { randomString } from '@/util/menu'
const props = defineProps<{
  dMap: Map<string, string>
  menus: MenuTable[]
  // 刷新
  refresh: () => void
}>()
// 关闭
const emit = defineEmits<{
  (event: 'cDlg'): void
}>()

const addForm = ref<MenuTable>({
  path: '/',
  key: randomString(10),
  name: '',
  component: '',
  parent: 0,
  icon: 'Aim',
  iconType: 'sys',
  sort: 1
})

// 表单dom
const elFormRef = ref<FormInstance>()
function add() {
  elFormRef.value?.validate((d) => {
    if (d) {
      addSysMenu(addForm.value)
        .then((d) => {
          ElMessage.success(d.msg)
          emit('cDlg')
          props.refresh()
        })
        .catch((d) => {
          ElMessage.error(d.msg)
        })
    }
  })
}

// 菜单类型
const menuType = ref(1)
function menuTypeChange(d: boolean) {
  if (d) {
    addForm.value.parent = 0
  } else {
    addForm.value.parent = 1
  }
}

// 图标选择
const dialogVisible = ref(false)
function openDialog() {
  dialogVisible.value = true
}
function closeDialog() {
  dialogVisible.value = false
}
function selectIcon(name: string) {
  closeDialog()
  addForm.value.icon = name
}

// 生成随机 菜单key
function randomKey() {
  addForm.value.key = randomString(10)
}
</script>

<template>
  <el-form ref="elFormRef" :model="addForm" :rules="formRules" label-width="100px">
    <el-row>
      <el-col :span="12">
        <el-form-item required :label="(dMap.get('name') || 'name') + '：'" prop="name">
          <el-input
            v-model="addForm.name"
            :placeholder="'请输入' + dMap.get('name') || 'name'"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="18">
            <el-form-item required :label="(dMap.get('key') || 'key') + '：'" prop="key">
              <el-input v-model="addForm.key" :placeholder="'请输入' + dMap.get('key') || 'key'" />
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="1">
            <el-button @click="randomKey" style="width: 100%">随机</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="菜单类型：">
          <el-radio-group v-model="menuType" @change="menuTypeChange">
            <el-radio :label="1">根菜单</el-radio>
            <el-radio :label="0">子菜单</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          v-if="addForm.parent !== 0"
          required
          :label="(dMap.get('parent') || 'parent') + '：'"
          prop="parent"
        >
          <el-select
            v-model="addForm.parent"
            :placeholder="'请输入' + dMap.get('parent') || 'parent'"
          >
            <el-option v-for="menu in menus" :label="menu.name" :value="menu.mId">
              <span style="float: left">{{ menu.name }}</span>
              <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">{{
                menu.path
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item :label="(dMap.get('sort') || 'sort') + '：'">
        <el-input-number v-model="addForm.sort" :min="1" />
      </el-form-item>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item required :label="(dMap.get('path') || 'path') + '：'" prop="path">
          <el-input
            v-model="addForm.path"
            :placeholder="'请输入' + dMap.get('path') || 'path'"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="(dMap.get('component') || 'component') + '：'" prop="component">
          <el-autocomplete
            style="width: 100%"
            v-model="addForm.component"
            :fetch-suggestions="componentSelect"
            :placeholder="'请输入' + dMap.get('component') || 'component'"
          >
          </el-autocomplete>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item
          type="textarea"
          :label="(dMap.get('iconType') || 'iconType') + '：'"
          prop="iconType"
        >
          <el-select
            v-model="addForm.iconType"
            :placeholder="'请选择' + dMap.get('iconType') || 'iconType'"
          >
            <el-option disabled label="user" value="user"></el-option>
            <el-option label="none" value="none"></el-option>
            <el-option label="sys" value="sys"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><el-form-item
          type="textarea"
          :label="(dMap.get('icon') || 'icon') + '：'"
          prop="icon"
          v-if="addForm.iconType == 'sys'"
        >
          <el-icon style="font-size: 20px">
            <component :is="(icon as any)[addForm.icon!]" />
          </el-icon>
          <el-button style="margin-left: 20px" @click="openDialog">选择图标</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="buttons">
      <el-button type="primary" @click="emit('cDlg')">取消</el-button>
      <el-button type="success" @click="add">保存</el-button>
    </div>
    <el-dialog v-model="dialogVisible" title="图标选择">
      <IconSelecter @select-icon="selectIcon" />
    </el-dialog>
  </el-form>
</template>
<style scoped lang="less">
.buttons {
  display: flex;
  margin-top: 30px;
  justify-content: flex-end;
}
</style>
